@charset "utf-8";
$bg_color:#ff9344;
$text_color:#494949;


@function r($px){
	@return $px/50+rem;
}

.web{
	header{
		width: 100%;
		height: r(150);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 r(22);
		box-sizing: border-box;
		.logo_box{
			width: r(123);
			height: r(123);
			overflow: hidden;
			img{
				width: 100%
			}
		}
		
		.search_box{
			width: r(268);
			height: r(55);
			
			form{
				border: 1px solid $bg_color;
				border-radius: 30px;
				padding: 0 r(10);
				font-size: 0;
				box-sizing: border-box;
				input{
					width: r(200);
					height: r(50);
					border: none;
					font-size: r(24);
					color: #777777;
					padding: 0 r(4);
					background-color:transparent;
					outline: none;
					box-sizing: border-box;
					vertical-align:middle;
				}
				button{
					border: none;
					background-color: transparent;
					vertical-align:middle;
					i{
						color:$bg_color;
						
					}
				}
			}
		}
		
		.city_box{
			width: r(164);
			height: r(58);
		
			position: relative;
			form{
				select{
					width: r(164);
					height: r(58);
					vertical-align: top;
					border: 1px solid $bg_color;
					-webkit-appearance:none;
					padding: 0 r(10);
				}
				.triangle{
					width:0;
					height: 0;
					border: r(14) solid;
					border-color: orange transparent transparent;
					position: absolute;
					top: 10px;
					right: 4px;
				}
			}
		}
			
	
	
	}
	
	
	
	footer{
		ul{
			display: flex;
			justify-content: space-between;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: white;
			li{
				width: 25%;
				text-align: center;
				i{
					font-size: r(72);
					color: $bg_color;
				}
				p{
					font-size: r(26);
					color: black;
				}
			}
		}
	}
}

